<template>
  <!-- 素材选择（库） -->
  <div>
    <a-modal
      v-model="visible"
      :title="'素材库'"
      top="5px"
      width="60%"
      height="90vh"
      @cancel="close"
      @ok="handleOk"
    >
      <a-spin :spinning="loading" tip="正在加载...">
        <a-tabs type="card" @change="tagsChange">
          <a-tab-pane
            v-for="(items,$index) in accountIds"
            :key="$index"
            :tab="items.name"
          >
          <!-- {{ list[$index] }} -->
            <my-table-screen
              :showAdvanced="false"
              :queryParam="list[$index].queryParam"
              :queryData="queryData"
              @handleFilter="handleFilter"
            ></my-table-screen>

            <div class="package" v-if="list[$index].materialList.length > 0" >
              <div class="list" v-for="(item,index) in list[$index].materialList" :key="index">
                <a-checkbox-group>
                  <div class="material-list ">
                    <a-checkbox :disabled="is_disabled(item)" :value="item" @change="checkChange(item)">
                      <div class="list-content"> 
                        <!-- 横版 -->
                        <div v-if=" vhType === 'horizontal' " class="image-material">
                          <img v-if="materialType === 'image'" :src="item.url" alt="">
                          <my-video v-if="materialType === 'video'" class="video" :value="item" ></my-video>
                          <span class="flat">{{ materialType === 'image' ? selectMaterialratio=== 'CREATIVE_IMAGE_MODE_SMALL' ? '小图' : '横版图片' : '横版视频'  }}</span>
                        </div>
                        <!-- 竖版 -->
                        <div
                          v-else-if=" vhType === 'vertical' "
                          class="image-material-vertical"
                        >
                          <div class="vertical-image">
                            <img v-if="materialType === 'image'" :src="item.url" alt="">
                            <my-video v-if="materialType === 'video'" class="video" :value="item" ></my-video>
                          </div>
                          <span class="flat">{{ materialType === 'image' ? '竖版图片' : '竖版视频' }}</span>
                        </div>
                      </div>
                      <div class="ant-checkbox-wrapper">
                        {{ item.filename }}
                      </div>
                    </a-checkbox>
                  </div>
                </a-checkbox-group>
              </div>
            </div>
            <div v-else class="package no-data">
              <!-- 无数据 -->
            </div>
            <!-- 分页 -->
            <pagination
              v-show="list[$index].total>0"
              :total="list[$index].total"
              :page.sync="list[$index].queryParam.page"
              :limit.sync="list[$index].queryParam.page_size"
              @pagination="getList"
            />
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { getImageMaterial,getVideoMaterial } from "@/api/headlinesApi";

export default {
  components:{ 
    myVideo:()=>import('@/components/myVideo')
  },
  props:{
    selectMaterialratio:{
      type:String,
      required:true,
      default:'CREATIVE_IMAGE_MODE_SMALL'
    },
    materialType:{  //素材类型（image/video）
      type:String,
      required:true,
      default:'image'
    },
    vhType:{  //素材类型 （vertical/horizontal）
      type:String,
      required:true,
      default:'vertical'
    },
    optionalNumber:{ // 选择素材限制数
      type:Number,
      default:0
    }
  },
  data() {
    return {
      loading:false, // 加载
      accountIds:JSON.parse(localStorage.getItem('campaign')).account_id,
      visible: true,
      list:[],

      queryData:[
        { id:'created_at',title:'创建时间',type:'times' },
        // { id:'keyWord',title:'关键词搜索',type:'input',placeholder:'支持ID或名称搜索' },
      ],
      checkedAll:[],
      tagsIndex:0,  // 当前index

      filtering:{ width:'',height:'',start_time:'',end_time:'' },  // ,start_time:'',end_time:''

      material_ids:[], // 选择后的素材
      material_ids_mark:[], // 选择后的素材id标记
    };
  },
  computed:{
    is_disabled(){
      return function(params){
        let _is = false
        if( this.material_ids.length >= this.optionalNumber+1 ){   // 每次最多选择10张素材
          _is = this.material_ids_mark.indexOf(params.id) !== -1 ? false : true
        }
        return _is
      }
    }
  },
  created(){
    console.info(this.optionalNumber,'optionalNumber')
    this.initial()
    this.getList()
  },
  methods: {
    // 初始化数据
    initial(){
      
      if( this.selectMaterialratio=== 'CREATIVE_IMAGE_MODE_SMALL' ){
        this.filtering.width = 456
        this.filtering.height = 300
      }else if ( this.selectMaterialratio=== 'CREATIVE_IMAGE_MODE_LARGE' || this.selectMaterialratio=== 'CREATIVE_IMAGE_MODE_VIDEO' ) {
        this.filtering.width = 1280
        this.filtering.height = 720
      }else if ( this.selectMaterialratio=== 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL' || this.selectMaterialratio=== 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ) {
        this.filtering.width = 720
        this.filtering.height = 1280
      }else if ( this.selectMaterialratio=== 'PROMOTION_CARD') {  // 推广卡片
        this.filtering.width = 108
        this.filtering.height = 108
      }

      this.accountIds.forEach( accountId => {
        let obj = {
          materialList:[],
          queryParam:{
            advertiser_id:accountId.account_id,
            created_at:[],
            page:1, 
            page_size:20,
            filtering: this.$deepCopy(this.filtering)
          },
          total:0 
        }
        this.list.push(obj)
      });

    },
    // 请求数据
    async getList(){
      this.loading = true
      // 清空已选素材
      this.material_ids = []  // {}
      this.material_ids_mark = []  // id

      // 判断创建时间段
      if( this.list[this.tagsIndex].queryParam.created_at.length > 0 ){
        this.list[this.tagsIndex].queryParam.filtering['start_time'] = this.list[this.tagsIndex].queryParam.created_at[0]
        this.list[this.tagsIndex].queryParam.filtering['end_time'] = this.list[this.tagsIndex].queryParam.created_at[1]
      }else {
        delete this.list[this.tagsIndex].queryParam.filtering.start_time
        delete this.list[this.tagsIndex].queryParam.filtering.end_time
      }

      if( this.materialType === 'image' ){
        await this.getImage()
      }else if (this.materialType === 'video') {
        await this.getVideo()
      }

      this.loading = false
    },
    async getImage(){
      let account_id = this.list[this.tagsIndex].queryParam.advertiser_id
      let queryParam = this.list[this.tagsIndex].queryParam

      const res = await getImageMaterial(account_id,queryParam)
      if(res.code === 'SUCCESS'){
        this.list[this.tagsIndex].materialList = res.data.list
        this.list[this.tagsIndex].total = res.data.page_info.total_number
      }
    },
    async getVideo(){
      let account_id = this.list[this.tagsIndex].queryParam.advertiser_id
      let queryParam = this.list[this.tagsIndex].queryParam

      const res = await getVideoMaterial(account_id,queryParam)
      if(res.code === 'SUCCESS'){
        this.list[this.tagsIndex].materialList = res.data.list
        this.list[this.tagsIndex].total = res.data.page_info.total_number
      }
    },
    // 选择素材
    checkChange(item){
      let items = Object.assign( 
        { 
          account_ids:this.list[this.tagsIndex].queryParam.advertiser_id, // 视频封面获取需要账号
          image_mode:this.selectMaterialratio // 上传头条需要素材类型
        },
        item 
      )
      if( this.material_ids_mark.indexOf(items.id) === -1 ){
        this.material_ids.push(items)
        this.material_ids_mark.push(items.id)
      }else {
        let index = this.material_ids_mark.indexOf(items.id)
        this.material_ids_mark.splice(index,1)
        this.material_ids.splice(index,1)
      }
    },
    // 切换账号素材库
    tagsChange(index){
      this.tagsIndex = index
      this.getList()
    },
    async handleOk() {
      this.$emit('confirmAddMaterial',this.material_ids)
      this.close()
    },
    close(){
      this.$emit('closeModal','material')
    },
    // 搜索
    handleFilter(){
      this.list[this.tagsIndex].queryParam.page = 1
      this.getList()
    },
  },
}
</script>

<style lang="less" scoped>
  ::v-deep .ant-modal{
    top: 5vh;
  }
  .package{
    width: 100%;
    max-height: 50vh;
    min-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-wrap:wrap;
    padding: 10px 0;
    border: 1px solid #CCCCCC;
    // background-attachment: scroll;
    .list{
      width: 25%;
      // height: 200px;
      padding: 0 10px;
      margin-bottom: 10px;
      .ant-checkbox-group{
        width: 100%;
        .material-list{
          padding: 0 10px;
          width: 100%;
          background-color: #F1F1F1;
          line-height: 30px;
          .list-content{
            width: 100%;
            position: relative;
            // 横版素材
            .image-material-vertical{
              position: relative;
              .vertical-image{
                width: 112.5px;
                height: 200px;
                margin: auto;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .flat{
                color: #24abe0;
                border: 1px solid #24abe0;
                height: 25px;
                padding: 0 5px;
                line-height: 25px;
                text-align: center;
                position: absolute;
                bottom: 2px;
                right: 2px;
              }
            }
            // 竖版素材
            .image-material{
              img{
                width: 100%;
                height: 100%;
              }
              .flat{
                color: #F1F1F1;
                border: 1px solid #F1F1F1;
                height: 25px;
                padding: 0 5px;
                line-height: 25px;
                text-align: center;
                position: absolute;
                bottom: 2px;
                right: 2px;
              }
            }
          }
          .ant-checkbox-wrapper{
            width: 100%;
            // .text-surplus();
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .content-active{
          border: 1px solid red;
        }
      }
    }
  }
</style>